var $ = layui.jquery;

layer = layui.layer;

var laytpl = layui.laytpl;
var form = layui.form;
var laydate = layui.laydate;

idd = 1; 

function add() {

	layer.open({
		type: 1,

		content: $("#tanchu").html(),
		area: ["500px", "550px"],
		title: "添加信息",
		success: function() {
			form.render();
			renderDate("birthid");
			$("input[value='确定']").click(save)
		}
		
	});

    
}



function save() {
	var name = $("#nameid").val();
	var habbit = "";
	var sex;
	var habbits = $("input[name='habbitN']");
	for (var i = 0; i < habbits.length; i++) {
		if (habbits[i].checked == true) {

			habbit += habbits[i].value + " ";


		}

	}

	var sexs = $("input[name='sex']");
	for (var i = 0; i < sexs.length; i++) {
		if (sexs[i].checked == true) {
			sex = sexs[i].value;
		}

	}
	var age = $("#birthid").val();

	var address = $("#address_select1").val();

	var html = $("#tradd").html();

	// 模板引擎

	var data = {
		idd: idd,
		name: name,
		sex: sex,
		age: age,
		habbit: habbit,
		address: address
	}
	var temp = laytpl(html).render(data);


	// var html = " " +
	// 	"<tr id='tr" + idd + "'>" +
	// 	"<td style='width: 9.375rem;' id ='td" + idd + "'>" + idd + "</td>" +
	// 	"<td style='width: 9.375rem;' id ='tdN" + idd + "'>" + name + "</td>" +
	// 	"<td style='width: 9.375rem;' id ='tdS" + idd + "'>" + sex + "</td>" +
	// 	"<td style='width: 14.375rem;' id ='tdH" + idd + "'>" + habbit + "</td>" +
	// 	"<td style='width: 14.375rem;' id ='tdA" + idd + "'>" + address + "</td>" +
	// 	"<td style='width: 9.375rem;' id ='tdC" + idd + "'> <a href ='javascript:;' onclick='testupd(" + idd +
	// 	")' class='layui-btn'>修改</a>" +
	// 	" <a href='javascript:;'  onclick='testdel(" + idd + ")' class='layui-btn'>删除</a>" +
	// 	"</tr>"

	$("#tbody").append(temp);

	idd++;

	habbit = "";



}

function testdel(idd) {


	layer.confirm("你确定要删除吗?", function(index) {
		$("#tr" + idd).remove()
		layer.close(index);
	})


}

function testupd(idd) {

	layer.open({

		type: 1,
		content: $("#tanchu").html(),
		title: "修改信息",


		success: function() {


			var name = $("#tdN" + idd).text();
			var sex = $("#tdS" + idd).text();
			var age = $("#tdB" + idd).text();
			var habbits = $("#tdH" + idd).text();
			var address = $("#tdA" + idd).text();



			var sexs = $("input[name='sex']");

			for (var i = 0; i < sexs.length; i++) {
				if (sexs[i].value == sex) {

					$("#sexid" + (i + 1)).prop("checked", true);
				}

			}


			var habbits2 = habbits.split(" ");


			for (var a = 0; a < habbits2.length; a++) {
				var temp = habbits2[a];

				for (var i = 0; i < 3; i++) {

					if ($("#habbit" + (i + 1)).val() == temp) {

						$("#habbit" + (i + 1)).prop("checked", true);
					}

				}


			}


			form.render();


           
			$("input[name='name']").val(name);
           
            $("input[name='birth']").val(age);
            
			renderDate("birthid");
			
			
			$("#address_select1").find("option[value='"+"address"+"']").prop("selected",true);

            $("input[value='关闭']").click(testclose)
			$("input[value='确定']").click({idd:idd},testsave);
			
			
			


		}

	})
	
}
	
	function testsave(event){
		var idd = event.data.idd;
		
		var sexs = $("input[name='sex']");
		var age =  $("input[name='birth']").val()
		
	    var name=$("input[name='name']").val();
		 
		
		
		var address = $("input[name='address']").val();
		
		
		var sex ="";
		for (var i = 0; i < sexs.length; i++) {
			if (sexs[i].checked == true) {
				sex = sexs[i].value;
			}
		
		}
		
		
		var habbit = "";
		
		var habbits = $("input[name='habbitN']");
		for (var i = 0; i < habbits.length; i++) {
			if (habbits[i].checked == true) {
		
				habbit += habbits[i].value + " ";
		
		
			}
		
		}
		var html = $("#tradd").html();
		
	var data = {
		idd: idd,
		name: name,
		sex: sex,
		age: age,
		habbit: habbit,
		address: address
	}
	var temp = laytpl(html).render(data);
		
	
			// $("#tbody").append(temp);
		// $("#tr"+iddZ).html(temp)
		
		$("#tdI"+idd).html(idd);
		$("#tdN"+idd).html($("#nameid").val());
		$("#tdS"+idd).html(sex);
		$("#tdB"+idd).html($("input[name='birth']").val());
		$("#tdA"+idd).html($("#address_select1").val());
		$("#tdH"+idd).html(habbit);
		
		habbit=""
		
		
		
	
		
		testclose();
		
	}
	
	
	
	function testclose(){
		layer.close(index)
	}
	







// function saver(idd) {
// 	var html = "" +

// 		"<td style='width: 9.375rem;' id ='td" + idd + "'>" + idd + "</td>" +
// 		"<td style='width: 9.375rem;' id ='tdN" + idd + "'>" + $("#nameup" + idd).val() + "</td>" +
// 		"<td style='width: 9.375rem;' id ='tdS" + idd + "'>" + $("#sexup" + idd).val() + "</td>" +
// 		"<td style='width: 9.375rem;' id ='tdB" + idd + "'>" + $("#birup" + idd).val() + "</td>" +
// 		"<td style='width: 14.375rem;' id ='tdH" + idd + "'>" + $("#hobbitup" + idd).val() + "</td>" +
// 		"<td style='width: 14.375rem;' id ='tdA" + idd + "'>" + $("#addressup" + idd).val() + "</td>" +
// 		"<td style='width: 9.375rem;' id ='tdC" + idd + "'> <a href ='javascript:;' onclick='testupd(" + idd +
// 		")' class='layui-btn'>修改</a> <a href='javascript:;'  onclick='testdel(" + idd + ")' class='layui-btn'>删除</a>"


// 	$("#tr" + idd).html(html);
// }


// $("#selectidd").click(select);

function select() {

 
	var select_name = $("#select_name").val();
	var select_address = $("#address_select2").val();

   
   for(var i=0;i<idd;i++){
   
   if( ($("#tdN"+i).text()==select_name) && ($("#tdA"+i).text()==select_address)){
     
	    alert(i);  
		
		
	    $("#tr"+i).css("background","red");

   }
   	
   }
     
	// alert(select_name)
	// alert(select_address)
	

}

function renderDate(id){
	laydate.render({
		elem:"#"+id,
		type: "date"		
	})
}